<template>
  <section class="app-inner">
    <el-dialog
      :title="studentForm.title"
      :visible.sync="studentForm.flag"
      width="70%"
      modal
      center
      show-close
      @open="openFormDialog"
    >
    <div style="position: relative;">
      <el-tabs v-model="activeName" class="el-tabs-root">
        <el-tab-pane label="基本信息" name="1" class="info-school-tab">
          <el-descriptions :column="3" class="left">
            <el-descriptions-item label="学生姓名">{{
              schoolData.name || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="学籍号">{{
              schoolData.code || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="姓名拼音">{{
              schoolData.pinyinName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="英文姓名">{{
              schoolData.englishName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="联系方式">{{
              !isShow ? $options.filters.cellularPhone(schoolData.contact) :  schoolData.contact || '--'
            }}</el-descriptions-item>
            <el-descriptions-item label="家庭住址">{{
              schoolData.address || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否默认生成账号">{{
              schoolData.isCreateAccountName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="账号">{{
              schoolData.account || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="所属校区">{{
              schoolData.schoolDistrictName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{
              schoolData.genderName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="国籍">{{
              schoolData.nationalityName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="证件类型">{{
              schoolData.cardTypeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="证件号码">{{
              !isShow && schoolData.cardType === '1' ? idCarDesensitization(schoolData.idCard) :  schoolData.idCard || '--'
            }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{
              schoolData.birthday || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="出生地">{{
              schoolData.birthPlaceName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="籍贯">{{
              schoolData.nativePlaceName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="民族">{{
              schoolData.nationName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="政治面貌">{{
              schoolData.politicsStatusName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="港澳台侨">{{
              schoolData.compatriotCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="宗教信仰">{{
              schoolData.religionCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="健康状况">{{
              schoolData.healthCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="血型">{{
              schoolData.bloodTypeCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否独生子女">{{
              schoolData.isOnlyChild === 0
                ? "是"
                : schoolData.isOnlyChild === 1
                ? "否"
                : "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否外来务工人员子女">{{
              schoolData.isMigrantChild === 0
                ? "是"
                : schoolData.isMigrantChild === 1
                ? "否"
                : "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否孤儿">{{
              schoolData.isOrphan === 0
                ? "是"
                : schoolData.isOrphan === 1
                ? "否"
                : "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否烈士或优抚子女">{{
              schoolData.isMartyrChild === 0
                ? "是"
                : schoolData.isMartyrChild === 1
                ? "否"
                : "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否残疾">{{
              schoolData.isDisabled === 0
                ? "是"
                : schoolData.isDisabled === 1
                ? "否"
                : "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="残疾类型">{{
              schoolData.disabledCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="是否寄宿">{{
              schoolData.isBoard === 0
                ? "是"
                : schoolData.isBoard === 1
                ? "否"
                : "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="特长">{{
              schoolData.speciality || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="户口性质">{{
              schoolData.residenceCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="户口所在地">{{
              schoolData.residenceLocationName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="户口地址">{{
              schoolData.residenceAddress || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="学生类别">{{
              schoolData.typeCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="当前状态">{{
              schoolData.currentStatusCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="在校状态">{{
              schoolData.currentSchoolCodeName || "--"
            }}</el-descriptions-item>
            <el-descriptions-item label="就读方式">{{
              schoolData.attendTypeName || "--"
            }}</el-descriptions-item>
          </el-descriptions>
          <div class="right">
            <el-image
              :style="{ 'max-width': '200px', 'max-height': '200px' }"
              :src="`/gateway/api/basic/minio/getFileSource?fileName=${schoolData.imageUrl}`"
              :preview-src-list="[
                `/gateway/api/basic/minio/getFileSource?fileName=${schoolData.imageUrl}`,
              ]"
            >
              <div slot="error" class="image-slot"></div>
            </el-image>
          </div>
        </el-tab-pane>

        <el-tab-pane label="学生荣誉" name="2" class="school-honors">
          <template v-if="schoolData.sepSchoolHonorInfoList.length > 0">
            <el-card
              v-for="(item, index) in schoolData.sepSchoolHonorInfoList"
              :key="index"
            >
              <el-descriptions :column="1">
                <el-descriptions-item label="荣誉名称">{{
                  item.name || "--"
                }}</el-descriptions-item>
                <el-descriptions-item label="荣誉级别">{{
                  item.levelName || "--"
                }}</el-descriptions-item>
                <el-descriptions-item label="获奖等级">{{
                  item.awardLevelName || "--"
                }}</el-descriptions-item>
                <el-descriptions-item label="获奖时间">{{
                  item.awardTime || "--"
                }}</el-descriptions-item>
                <el-descriptions-item label="颁奖学年度">{{
                  item.awardTermName || "--"
                }}</el-descriptions-item>
                <el-descriptions-item label="颁奖单位">{{
                  item.rewardsBureau || "--"
                }}</el-descriptions-item>
                <el-descriptions-item label="获奖类型">{{
                  item.awardTypeName || "--"
                }}</el-descriptions-item>
                <el-descriptions-item label="奖项类别">{{
                  item.subjectTypeName || "--"
                }}</el-descriptions-item>
              </el-descriptions>
              <div :style="{ display: 'flex' }">
                <div :style="{ 'vertical-align': 'top', flexShrink: '0' }">
                  荣誉照片：
                </div>
                <div :style="{ display: 'flex', 'flex-wrap': 'wrap' }">
                  <template
                    v-for="(item1, index) in item.awardPic &&
                    item.awardPic.split(',')"
                  >
                    <el-image
                      v-if="item1 === '' ? false : true"
                      :key="index + '1-s-e-r'"
                      :style="{
                        margin: '0 20px 20px 0',
                        width: '150px',
                        height: '150px',
                        borderRadius: '5px',
                      }"
                      :src="`/gateway/api/basic/minio/getFileSource?fileName=${item1}`"
                      :preview-src-list="[
                        `/gateway/api/basic/minio/getFileSource?fileName=${item1}`,
                      ]"
                    >
                      <div slot="error" class="image-slot"></div>
                    </el-image>

                    <!-- <img
                      v-if="item1 === '' ? false : true"
                      :key="index + '1-s-e-r'"
                      :src="item1"
                      :style="{
                        margin: '0 20px 20px 0',
                        width: '150px',
                        height: '150px',
                        borderRadius: '5px',
                      }"
                    /> -->
                  </template>
                </div>
              </div>
            </el-card>
          </template>
          <div v-else>暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="同住人信息" name="3" class="school-honors" v-if="showAll">
          <div v-if="schoolData.togetherList && schoolData.togetherList.length > 0">
            <div v-for="item in schoolData.togetherList" :key="item.idNumber" class="together-row">
              <el-descriptions :column="2">
                <el-descriptions-item label="姓名">{{ item.name || '--'}}</el-descriptions-item>
                <el-descriptions-item label="联系方式">{{!isShow ? $options.filters.cellularPhone(item.mobile) : item.mobile || '--'}}</el-descriptions-item>

                <el-descriptions-item label="证件号码">{{ !isShow && item.cardType === '1' ? $options.filters.idCarDesensitization(item.idNumber) :  item.idNumber || '--' }}</el-descriptions-item>
                <el-descriptions-item label="关系">{{ item.relation || '--'}}</el-descriptions-item>
              </el-descriptions>
            </div>
          </div>
          <div v-else>暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="个人健康记录" name="4" class="school-honors" v-if="showAll">
          <div v-if="schoolData.healthRecords && schoolData.healthRecords.length > 0">
            <div v-for="item in schoolData.healthRecords" :key="item.dateTime" class="health-records-row">
              <span class="dateTime">{{item.dateTime}}</span>
              <span>{{item.text}}</span>
            </div>
          </div>
          <div v-else>暂无数据</div>
        </el-tab-pane>
      </el-tabs>
      <div class="switch-btn cursor iconfont" :class="[isShow ? 'icon-biyan': 'icon-yanjing']" @click="handleClickIsShow"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click.native.prevent="close()"
          type="primary"
          class="btn-close"
          >取消</el-button
        >
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
  name: 'teachInfoForm',
  components: {},
  props: {
    studentForm: {
      type: Object
    },
    data: {
      type: Object
    },
    // 是否展示同住人信息和个人健康记录
    showAll: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    data: {
      deep: true,
      handler (newVal, oldVal) {
        this.schoolData = newVal
      }
    }
  },
  data () {
    return {
      isShow: false,
      activeName: '1',
      // 基础表单信息
      infoForm: {},
      // 表单数据
      schoolData: {
        sepSchoolHonorInfoList: [
          {
            honorName: ''
          }
        ],
        schoolName: '',
        address: '',
        name: ''
      },
      content: '',
      isClear: false, // 清除富文本编辑器内容
      dialogImageUrl: '',
      dialogVisible: false,
      options: [],
      honorLevels: []
    }
  },
  methods: {
    handleClickIsShow () {
      this.isShow = !this.isShow
    },
    openFormDialog () {
      this.activeName = '1'
    },
    idCarDesensitization (value) {
      return value ? value.replace(/^(.{6})(?:\d+)(.{3})$/, '$1********$2') : ''
    },
    close () {
      this.$emit('closestudentForm', false)
    },
    sub () {
      // console.log('------', this.content)
    }
  }
}
</script>

<style lang="scss" scoped>
.switch-btn{
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  position: absolute;
  right: 0;
  top: 5px;
}
.app-inner {
  position: relative;

  .el-tabs-root {
    /deep/ {
      .el-tabs__content {
        height: 480px;
        overflow: auto;
      }
      .info-school-tab {
        display: flex;
        .left {
          flex: 4;
        }
        .right {
          flex: 1;
        }
      }
    }
  }
  .el-dialog--center .el-dialog__body {
    height: 620px;
  }
  .dialog-footer {
    position: absolute;
    bottom: 10px;
    .btn-close {
      margin-left: -100px;
    }
    .btn-preservation {
      margin-left: 100px;
    }
  }
  .together-row {
    border-bottom: 3px solid #f3f3ff;
    padding-top: 10px;
  }
  .health-records-row {
    line-height: 30px;
    .dateTime {
      margin-right: 10px;
    }
  }
}
</style>
